<template>
	<div class="wrapper">
		<Title></Title>
		<div class="content">
			<div class="site" @click="link">
				<template v-if="consignee&&phone&&site">
					<p>
						<span v-text="consignee"></span>
						<span v-text="phone"></span>
					</p>
					<div v-text="site"></div>
				</template>
				<template v-else="consignee&&phone&&site">
					<p>添加收货地址</p>
				</template>
			</div>
			<div class="ui-line"></div>
			<ul class="data-stat">
				<li v-for="(item,i) in avatar" :class="i ===0 ? 'activate':''" :key="i" @click="activate(i)" ref="li">
					<div>
						<a :style="item.src" v-text="item.name"></a>
					</div>
				</li>
			</ul>
			<div class="payment-fold-switch">
				<span v-text="`收起更多支付方式`"></span>
			</div>
			<div class="ui-line"></div>
			<ul class="data-stat-server">
				<li v-for="(item,i) in serve" :key="i" >
					<div>
						<a v-text="item"></a>
					</div>
				</li>
			</ul>
			<div class="ui-line"></div>
			<ul class="data-stat-commodity">
				<li v-for="(item,i) in product.item" :key="i" >
					<div>
						<img :src="item.img" alt="">
						<a v-text="item.name"></a>
							<p>
								<span v-if="item.num>1" v-text="`x`"></span>
								<span v-if="item.num>1" v-text="item.num"></span>
								<span v-if="item.num>1" v-text="`=`"></span>
								<span class="price" v-text="`${item.price}.00`"></span>
							</p>
					</div>
				</li>
			</ul>
			<div class="ui-line"></div>
			<div class="detail-box">
				<p>
					<span v-text="`商品价格:`"></span>
					<i v-text="`${product.prices}.00`"></i>
				</p>
				<p>
					<span v-text="`已优惠:`"></span>
					<i v-text="`0.00`"></i>
				</p>
				<p>
					<span v-text="`配送费用:`"></span>
					<i v-text="`0.00`"></i>
				</p>
			</div>
			<div class="ui-line"></div>
		</div>
		<div class="bottom-submit">
			<div class="mi_site">
				<i v-text="`配送至: `"></i>
				<span v-text="site"></span>
			</div>
			<div class="box-flex">
				<div class="price-box flex">
					<span v-text="`共${product.quantity}件 合计: `"></span>
					<strong v-text="product.prices"></strong>
					<strong v-text="`.00`"></strong>
				</div>
				<a class="btn flex" v-text="`去付款`" @click="createOrder"></a>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
    import Title from "../components/Title";
    import {createNamespacedHelpers} from "vuex";
    const {mapState} = createNamespacedHelpers("order");//mapState放在计算属性//const声明常量
    export default {
        components: {//注册组件不然不能使用
            Title
        },
        data(){
            return {
				avatar:[
					{name:"微信支付",src: 'background-image: url()'},
					{name:"支付宝",src:'background-image: url()'},
					{name:"小米钱包",src: 'background-image: url()'},
					{name:"银联支付",src: 'background-image: url()'},
					{name:"翼支付",src:'background-image: url()'},
					{name:"小米分期",src:'background-image: url()'}
				],
	            serve:[
	                "运费","电子发票","优惠券"
	            ],
            }
        },
        computed:{
	        ...mapState(["site","user","consignee","phone","product","siteId","cartId","cart"])
        },
        methods: { //存储方法往页面传方法
            createOrder(){//去付款并且生成订单
                //日期
                let myDate = new Date();
                myDate.toLocaleString();
                let n = myDate.getFullYear();//年
                let y = myDate.getMonth()+1;
                let r = myDate.getDate();
                let s = myDate.getHours();
                let f = myDate.getMinutes();
                if(y<10){y = "0"+y}
                let time = n+"/"+y+"/"+r+" "+s+':'+f;
                //编号
                let serialNumber = "";
                for(let i = 0;i<16;i++){
                    let num = Math.floor(Math.random()*10);
                    num.toString();
                    serialNumber += num;
                }
                /**/
                let newOrder = {};
                newOrder.site = this.site;
                newOrder.user = this.user;
                newOrder.consignee = this.consignee;
                newOrder.product = this.product;
                newOrder.siteId = this.siteId;
                newOrder.cartId = this.cartId;
                newOrder.time = time;
                newOrder.serialNumber = serialNumber;
                //把数据传到订单仓库
	            this.$store.dispatch("orderDetail/addOrderDetail",newOrder);
                //调到订单详情
                this.$router.push({path:'/order/detail'});
            },
            getUser(){//获取用户名
                let cookie = document.cookie.split(";");
                let user = null;
                if(cookie.length){
                    for(let i=0;i<cookie.length;i++){
                        let arr = cookie[i].split("=");
                        if(arr[0] === "userinfo"){
                            user = arr[1];
                        }
                    }
                }
                return user;
            },
            activate(i){
                for(let j=0;j<this.avatar.length;j++){
                    if(i === j){
                        this.$refs.li[i].classList.add("activate");
                    }else{
                        this.$refs.li[j].classList.remove("activate");
                    }
                }
            },
	        //跳转到修改地址
	        link(){
                this.$router.push({path:'/addressed',query: {router: this.$route.path}});
	        },
        },
	    /*钩子函数*/
        created(){
			this.$store.dispatch("order/site",this.getUser());//组件创建吧用户名发送到仓库
            //this.$store.dispatch("site/init",this.getUser());//用户的地址
        },
        mounted(){

        },
        updated(){//组件更新完毕

        },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	.wrapper
		width 100%
		height 100%
		.content
			width 100%
			height 100%
			padding-top .9rem
			padding-bottom 1.2rem
			overflow-y auto
			.site
				background: #fff url("../assets/bd1.png") 0 0 repeat-x;
				background-size: .52rem .08rem;
				padding: .26rem .4rem
				padding-top: .4rem;
				padding-bottom: .3rem;
				position: relative
				p
					font-size: .3rem
					font-weight: 700
					color: #3c3c3c
					margin-bottom: .2rem
			.site:after
				content: "";
				position: absolute;
				right: .32rem;
				top: 50%;
				width: .2rem;
				height: .2rem;
				border-left: 2px solid currentColor;
				border-top: 2px solid currentColor;
				transform: translate3d(0,-50%,0) rotate(135deg);
				-webkit-transform: translate3d(0,-50%,0) rotate(135deg);
				border-color black
			.ui-line
				border-top: 1px solid #e0e0e0;
				border-bottom: 1px solid #e0e0e0
				height: .2rem;
				background: #f5f5f5;
				overflow: hidden;
				clear: both;
			.data-stat
				.activate
					background-image: url(//s1.mi.com/m/images/m/check_press.png)
				li
					margin: 0 .4rem;
					border-bottom: 1px solid #e0e0e0
					padding-right: .6rem;
					background-image: url(//s1.mi.com/m/images/m/check_normal.png);
					background-position: 100% 50%;
					background-repeat: no-repeat;
					background-size: .4rem .4rem;
					a
						background-size: .5rem .5rem
						background-position 0 center
						background-repeat no-repeat
						display: block;
						font-size: .26rem;
						line-height: .5rem;
						padding: .2rem 0 .2rem .7rem;
						color: #333;
						text-decoration: none;
			.data-stat-server
				li
					margin: 0 .4rem;
					border-bottom: 1px solid #e0e0e0
					padding-right: .6rem;
					background-position: 100% 50%;
					background-repeat: no-repeat;
					background-size: .4rem .4rem;
					a
						background-size: .5rem .5rem
						background-position 0 center
						background-repeat no-repeat
						display: block;
						font-size: .26rem;
						line-height: .5rem;
						padding: .2rem 0 .2rem 0;
						color: #333;
						text-decoration: none;
			.data-stat-commodity
				width 100%
				li
					width 100%
					div
						display flex
						border-bottom: 1px solid #e0e0e0
						padding: .14rem 0
						margin: 0 .4rem
						align-items center
						text-align left
						justify-content space-between
						img
							width: .8rem;
							height .8rem;
						a
							padding-left .1rem
							text-align left
							max-width 3.7rem
							margin-right .3rem
							color: #000
							width 50%
						p
							margin-right .05rem
							.price
								color: #333
								font-weight 600
			.detail-box
				padding: .26rem .4rem;
				background: #fff
				font-style:normal
				p
					padding .03rem 0
					span
						color black
						font-size .24rem
						font-weight bold
					i
						color #333
						font-style:normal
			.payment-fold-switch
				color: #bdbdbd;
				line-height: .8rem;
				text-align: center;
				margin: 0 auto;
				border-top: 1px solid #eee
				height .8rem
				width 100%
		.bottom-submit
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 99;
			box-shadow: 0 3px 14px 2px rgba(0,0,0,.12);
			.mi_site
				background: #fbf3c4;
				color: #b57842;
				padding: .12rem .2rem;
				opacity: .7
				i
					font-style:normal
				span
					line-height: .3rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap
			.box-flex
				display: flex
				.flex
					-webkit-box-flex: 1;
					-webkit-flex: 1 1 auto;
					flex: 1 1 auto
				.price-box
					font-size .3rem
					color #ff6700
					width: 100%;
					text-align: center;
					display flex
					align-items center
					justify-content center
					strong
						color: #ff5722
						margin-right: .2em
				.disable
					color: #333
					background: #f4f4f4;
					border: 1px solid #f4f4f4
					text-align: center;
					width: 100%;
					height: 1rem;
					line-height: 1rem;
					font-size: .28rem
				.btn
					outline: 0;
					background: #ff5722;
					color: #fff;
					text-align: center;
					width: 100%;
					height: 1rem;
					line-height: 1rem;
					font-size: .28rem;

</style>